<template>
    <div>
        <div class="main-title">
            <h4>商品属性</h4>
            <div class="btn-box">
                <el-button class="filter-item" type="primary" plain @click="$router.back()">返回</el-button>
            </div>
        </div>
        <el-form :model="form" size="medium" ref="form" label-width="0px">
            <el-table :data="form.goodsSkuDTO" v-loading="listLoading" element-loading-text="给我一点时间">                      
                <el-table-column align="center" label="颜色">
                    <template slot-scope="scope">
                        <span>{{scope.row.propertiesName.split(';')[0].split(':')[1]}}</span>
                    </template>
                </el-table-column> 
                <el-table-column align="center" label="尺寸">
                    <template slot-scope="scope">
                        <span>{{scope.row.propertiesName.split(';')[1].split(':')[1]}}</span>
                    </template>
                </el-table-column> 
                <el-table-column align="center" label="兰蜜价">
                    <template slot-scope="scope">
                        <span>{{scope.row.lanPrice}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column align="center" label="库存数">
                    <template slot-scope="scope">
                        <span>{{scope.row.promotionNum}}</span>
                    </template>
                </el-table-column>                    -->
                <!-- <el-table-column align="center" label="是否显示" width="200px">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.enable"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="true"
                            :inactive-value="false"
                             @change="updateEnable(scope.row)"
                            >
                        </el-switch>
                    </template>
                </el-table-column> -->
            </el-table>
        </el-form>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
        </el-pagination>     
    </div>
</template>

<script>
export default {
    data() {
        return {
            listLoading:false,
            listTotal:0,
            listQuery:{
                pageNo: 1,
                pageSize: 10,
                promotionGoodsId: this.$route.query.id
            },
            form:{
                goodsSkuDTO:[]
            }    
        }
    },
    mounted(){
        this.getGoodsSkuDTO()
    },
    methods:{
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.getGoodsSkuDTO()
        },
        handleCurrentChange(page) {
          this.listQuery.pageNo = page;
          this.getGoodsSkuDTO();
        },
        getGoodsSkuDTO () {
            this.listLoading=true
            this.request({
                url: '/promotion/goods-sku',
                method: 'get',
                params: this.listQuery
            }).then(({data}) => {
                this.listLoading=false
                if(data!==null){
                    this.listTotal=data.total
                    this.form.goodsSkuDTO=data.records                 
                } else {
                     this.form.goodsSkuDTO=[]
                }
            }).catch(err => {
                console.log(err);
                 this.listLoading=false
            }); 
        },
        updateEnable(enable) {
            console.log(enable)
            this.request({
                url: '/promotion/goods-sku/'+enable.id,
                method: 'put',
                data:enable
            }).then((res) => {
                 if(res.data===true) {
                    this.$message({
                        message: '设置成功',
                        type: 'success'
                    })
                }else {
                    this.$message({
                        message: '设置失败',
                        type: 'error'
                    })
                } 
            }).catch(err => {
                console.log(err);
            });
        }
    }
}
</script>

<style>

</style>
